<template>
    <div>
        <Header active="sell" />
        <div class="content">
            <div class="content_view">
                <div class="search_view">
                    <el-input v-model="keywords" placeholder="请输入内容" @keyup.enter.native="handleEnter"></el-input>
                    <div class="search_img"><img src="@/assets/image/add2.png" alt="" @click="open_dialog('release')">
                    </div>
                </div>
                <div class="list">
                    <div class="item_view" v-for="(item, index) in list" :key="index">
                        <div class="item">
                            <img :src="item.images[0] || ''" alt="" class="cover">
                            <div class="name">{{ item.name }}</div>
                            <div class="other">
                                <div class="price">
                                    <div class="unit">￥</div>
                                    <div class="value">{{ item.price }}</div>
                                </div>
                                <div class="submit" @click="submit(item)">{{ $t('mall.购买') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page_view">
                    <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                        @current-change="change" />
                </div>
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" top="50px" width="530px" :modal="true"
                    :center="true" :show-close="false" append-to-body destroy-on-close>
                    <MallRelease @ok="dialog_ok" @close="dialogVisible = false" v-if="dialogType == 'release'" />
                    <MallEdit :shop_id="shop_id" @ok="dialog_ok" v-else />
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "@/components/mall/Header.vue"
import MallEdit from "@/components/mall/MallEdit.vue"
import MallRelease from "@/components/mall/MallRelease.vue"
export default {
    // props: {
    //     type: String
    // },
    components: {
        Header,
        MallEdit,
        MallRelease
    },
    data() {
        return {
            keywords: "",
            page: 1,
            list: [],
            total: 0,

            dialogType: '',
            shop_id: null,
            dialogTitle: "",
            dialogVisible: false
        }
    },
    // watch: {
    //     type: {
    //         handler(value) {
    //             this.page = 1;
    //             this.getList();
    //         },
    //         immediate: false
    //     }
    // },
    created() {
        this.getList();
        this.getShopInfo();
    },
    destroyed() {
        this.page = 1;
        this.list = [];
    },
    methods: {
        async getShopInfo() {
            let { userinfo } = await this.$api.usersApi.userIndex();
            this.shop_id = userinfo.shop_id;
        },
        async getList() {
            let res = await this.$api.shopApi.shopList({
                keyword: this.keywords,
                type: "sell",
                page: this.page
            });
            if (!res) return;
            res = res.list;

            this.list = res.data;
            this.total = res.total;

        },
        change(value) {
            this.page = value;
            this.getList();
        },

        handleEnter() {
            this.page = 1;
            this.getList();
        },
        open_dialog(type) {
            type = this.shop_id ? type : 'edit';
            this.dialogType = type;
            if (type == 'edit') this.dialogTitle = this.$t('my.编辑资料');
            if (type == 'release') this.dialogTitle = this.$t('mall.新商品');
            this.dialogVisible = true;
        },
        dialog_ok(type) {
            this.dialogVisible = false;
            if (type == 'edit') {
                this.getShopInfo();
            } else {
                this.page = 1;
                this.getList();
            };
        },
        submit(item) {
            let id = item.id;
            this.$router.push({
                name: 'mallDeta',
                query: { id }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    height: calc(100vh - 92px);
    padding: 0 160px;
    box-sizing: border-box;
    overflow: auto;
}

.content_view {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background: #FCFCFE;
    display: flex;
    flex-direction: column;

    .search_view {
        width: 100%;
        height: 92px;
        padding: 24px 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        :deep(.el-input__inner) {
            height: 44px;
        }

        .search_img {
            padding-left: 20px;

            img {
                width: 32px;
                height: 32px;
            }
        }
    }

    .list {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        // justify-content: space-between;
        .item_view {
            // flex: 1;
            width: 284px;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .item {
            width: 264px;
            margin-bottom: 18px;

            .cover {
                width: 264px;
                height: 264px;
                border-radius: 20px;
            }

            .name {
                height: 44px;
                line-height: 22px;
                font-size: 16px;
                color: #000000;
                margin: 7px 0;
                box-sizing: content-box;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                /* 显示的行数 */
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .other {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
                display: flex;
                align-items: baseline;

                .unit {
                    font-weight: bold;
                    font-size: 16px;
                    color: #FA5151;
                }

                .value {
                    font-weight: bold;
                    font-size: 24px;
                    color: #FA5151;
                }
            }

            .submit {
                width: 72px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                font-size: 16px;
                color: #FFFFFF;
                background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
                border-radius: 66px 66px 66px 66px;
                cursor: pointer;
            }
        }
    }
}
</style>